<script setup lang="ts">
import dayjs from 'dayjs';
import { getSysImgUrl } from '/@/utils/index';
import { showModal, showLoading, showToast, makePhoneCall } from '@tarojs/taro';
import { URGING } from '/@/api/modules/flow-path/flow-path';
import PHONE from '/@/assets/image/icon/phone.png';
interface Props {
  /**
   * 审批列表
   */

  list: FlowPathDto.ApproverDto[];
  /**
   * 是否审批发起人
   */
  isSender: boolean;
  /**
   * 审批的title
   */
  title: string;
  /**
   * 发起人id
   */
  senderId: string;
  /**
   * 审批记录id
   */
  recordId: string;
}

const props = withDefaults(defineProps<Props>(), {
  list: () => [],
  isSender: false,
});

/**
 * 审批状态：
 *1: '待审批',
 *2: '同意',
 *3: '拒绝',
 *4: '已撤销',
 */
const APPROVE_STATUS = {
  0: '',
  1: '审批中',
  2: '已同意',
  3: '已拒绝',
  4: '已撤销',
};

/**
 * 催办
 */
function urgent(item: FlowPathDto.ApproverDto) {
  let totalUser = '';
  /**
   * 多人审批时的审批方式（1-依次审批，2-会签，3-或签）
   */
  const receiverUaaIds: string[] = [];
  if (
    item.recordApproverVSetList &&
    item.recordApproverVSetList.length > 0 &&
    item.recordApproverVSetList[0].multiApproveType === 1
  ) {
    totalUser += item.recordApproverVSetList[0].approverUserName;
    item.recordApproverVSetList[0].approverUaaUserId &&
      receiverUaaIds.push(item.recordApproverVSetList[0].approverUaaUserId);
  } else {
    item.recordApproverVSetList?.forEach((subItem, index) => {
      if (item.recordApproverVSetList) {
        subItem.approverUaaUserId && receiverUaaIds.push(subItem.approverUaaUserId);
        if (index === item.recordApproverVSetList.length - 1) {
          totalUser += subItem.approverUserName;
        } else {
          totalUser += subItem.approverUserName + ', ';
        }
      }
    });
  }

  showModal({
    title: '审批催办',
    content: '确定向' + totalUser + '发起催办通知吗？',
    success: function (response) {
      if (response.confirm) {
        notify(receiverUaaIds);
      }
    },
  });
}

/**
 * 发送通知
 */
function notify(receiverUaaIds: string[]) {
  showLoading();
  URGING({
    text: props.title + '审批提醒', //“张警官提交的出差申请审批提醒
    recordId: props.recordId,
    senderUaaId: props.senderId,
    receiverUaaIds,
  }).then((res) => {
    if (res.comResp?.code === 100) {
      showToast({ title: '发起催办成功', icon: 'success' });
    } else {
      showToast({ title: '发起催办失败', icon: 'error' });
    }
  });
}
/**
 * 拨打电话
 */
function phone(num?: string) {
  if (!num) {
    return;
  }
  makePhoneCall({
    phoneNumber: num,
  });
}
</script>

<template>
  <view class="detail-approve-list">
    <view class="app-approve-item" v-for="(item, index) in props.list" :key="item.id || index">
      <view class="app-approve-item--center">
        <view
          class="app-approve-item__dot"
          :style="{ backgroundColor: item.on === 1 ? '#507aee' : '#ddd' }"
        ></view>
        <view
          v-if="index + 1 !== props.list.length"
          class="app-approve-item__line"
          :style="{
            backgroundColor: props.list[index + 1].on === 1 ? '#507aee' : '#ddd',
          }"
        ></view>
      </view>
      <view class="app-approve-item--right">
        <view class="app-approve-item__name">
          <text v-if="index === 0">{{ item.approverUserName }}</text>
          <text v-else>{{
            item.approverUserName +
            (item.on === 1 && item.flowType === 1
              ? ` (${APPROVE_STATUS[item.reviewStatus || 0]})`
              : '')
          }}</text>
          <image
            :src="PHONE"
            class="app-approve-item__img"
            v-if="index === 0"
            @click="phone(item.approverUserPhone)"
          />
        </view>
        <view v-if="index === 0">
          <text>发起审批</text>
        </view>
        <view v-if="item.opinion">
          <text>审批意见:&nbsp;&nbsp;</text>
          <text>{{ item.opinion }}</text>
        </view>
        <!--审批中或者抄送人列表-->
        <view v-if="item.recordApproverVSetList && item.recordApproverVSetList.length > 0">
          <text>{{
            item.recordApproverVSetList.map((item) => item.approverUserName).join(', ')
          }}</text>
        </view>
      </view>
      <view>
        <view v-if="item.updateTime && item.updateTime != 0">
          <text> {{ dayjs(item.updateTime).format('MM-DD HH:mm') }}</text>
        </view>
        <view v-if="item.approverSign">
          <image
            :src="getSysImgUrl(item.approverSign)"
            class="app-approve-item__image"
            mode="aspectFill"
          />
        </view>
        <view
          v-if="
            item.reviewStatus === 1 &&
            item.on === 1 &&
            isSender &&
            item.recordApproverVSetList &&
            item.recordApproverVSetList[0]?.flowType === 1
          "
        >
          <text class="app-approve-item__urgent" @click="urgent(item)">催办</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
